<template>
  <div class="login">
    <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" :rules="rules"     :model="user" >
      <a-divider>用户登录</a-divider>
      <a-form-item label="邮箱" name="account" has-feedback>
        <a-input v-model:value="user.account" type="email" autocomplete="off"/>
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input-password v-model:value="user.password" type="password"/>
      </a-form-item>
      <a-button
        type="primary"
        html-type="submit"
        class="submit"
        @click="login(user)"
        >登录</a-button
      >
    </a-form>
  </div>
</template>

<script>
import { _rules,success,warning,loading } from '@/antd';
import { defineComponent, reactive } from "vue";
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
export default defineComponent({
  name:'Login',
  setup() {
    const user = reactive({
      account: "",
      password: "",
    });
    const router = useRouter();
    const store = useStore();

    const login = data=> {
      store.dispatch('login/asyncLogin',data).then(()=>{ 
        loading('登录中…');
        setTimeout(() => {
          success('登录成功！',router.push({name:'Index'}));
        }, 1000);
      }).catch(err=>warning(err))
    };
    const rules = {
      account: [{ required: true  , validator:_rules.account.validator , trigger: 'change' }],
      password: [{ required: true , trigger: 'change' , message:_rules.password.messageSecond }],
    };
    return {
      user,login,rules
    };
  },
});
</script>

<style lang="scss" scoped>
.login{
  width:500px;
  margin: 0 auto;  
  .ant-btn.ant-btn-primary{
    position: relative;
    left: 50%;
    transform: translateX(-50%)
  }
}
</style>